<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.p{
				width: 400px;
				background: gray;
				
				font-size: 40px;
				font-weight: bold;
			}
			p{
				margin-left: 50px;
			}
			.p4{
				color: white;
				text-shadow: 0 0 10px white,
				0 0 20px white,				
				0 0 30px white,				
				0 0 40px palevioletred,			
				0 0 70px palevioletred,			
				0 0 80px palevioletred,			
				0 0 100px palevioletred,				
				0 0 150px palevioletred;
			}.p10{
				color: gray;
				background-color: paleturquoise;
				margin-left: 0px;
			}
			.p11{
				color: #fff;
				text-shadow: -4px -4px lightblue;
			}
			.p12{
				color: #fff;
				text-shadow: 3px 3px lightblue;
			}.p13{
				color: #fff;
  				text-shadow: 4px 4px 0 #666, 7px 7px 0 #eee;
			}.p14{
				color: white(255, 179, 140,0.5);
  				text-shadow: -3px -3px 0 rgba(180,255,0,0.5);
			}
				
		</style>
	</head>
	<body>
		<div class="p">
			<p style="color: white;">TEXT SHADOW</p>
			<p style="color: white;text-shadow:0 0 4px red;">描边文字</p>
			<p style="color: white;text-shadow:0 0 9px red;">外发光</p>
			<p class="p4" style="">外发光</p>
			<p style="text-shadow:1px 1px white;">内阴影</p>
			<p style="color: white; text-shadow: 1px 1px 1px #000, -1px -1px 2px #fff;">浮雕</p>
			<p style="color: transparent;text-shadow: 0 0 5px #f96;">模糊</p>
			<p style="color: transparent;text-shadow:0 0 5px #f96,1px -1px 4px #fff;; ">模糊浮雕</p>
			<p class="p10">INSET RETRO</p>
			<p class="p11">立体字体</p>
			<p class="p12">立体字体</p>
			<p class="p13">VINTGE/RETRO</p>
			<p class="p14">ANAGLYPHIC</p>
		</div>
	</body>
</html>